*{border:0;margin:0;padding:0;}
a{text-decoration: none;color:inherit;}
body{background-color:#fff;}
li{list-style-type: none;}

.wrapper{max-width:750px;margin:auto;}
.stage1 .banner img{width:100%;}
.stage1 .infobar{padding-top:15px;}
.stage1 .infobar .toparea{text-align: center;font-size: 18px;font-family: "Microsoft YaHei";color: rgb(131, 131, 131);text-transform: uppercase;line-height: 2;}
.stage1 .infobar .bottomarea{text-align: center;font-size: 18px;font-family: "Microsoft YaHei";color: rgb(131, 131, 131);text-transform: uppercase;line-height: 1.6;}
.stage1 .infobar .bottomarea span{display:inline-block;width:30px;margin:0 4px;color:#fff;background-color: rgb(89, 194, 230);}
.stage1 .searchbar{position:relative;width:96vw;margin:auto;padding:25px 0;}
.stage1 .searchbar .searcharea{width:100%;height:30px;text-indent:1em;color: rgb(131, 131, 131);font-family: "Microsoft YaHei";font-size: 18px;text-transform: uppercase;border:1px solid rgb(131, 131, 131);}
.stage1 .searchbar .searchicon{position: absolute;top:30px;right: 5px;width:20px;}
.stage1 .choosebar{overflow: hidden;position: relative;}
.stage1 .choosebar::before{content:'';position: absolute;left:50%;top:8px;height:8px;width:1px;background-color:rgb(131, 131, 131);}
.stage1 .choosebar .leftarea{float:left;padding-right:.5em;width:50%;text-align: right;font-family: "Microsoft YaHei";color: rgb(89, 194, 230);font-size: 18px;box-sizing: border-box;}
.stage1 .choosebar .rightarea{float:right;padding-left:.5em;width:50%;box-sizing: border-box;font-family: "Microsoft YaHei";color: rgb(131, 131, 131);font-size: 18px;}
.stage1 .contentbar{position: relative;overflow: hidden;width:96vw;margin: 10px auto;}
.stage1 .contentbar .contentimg{width:100%;float:left;}
.stage1 .contentbar .contentitem{position:relative;float:left;width:47vw;margin-top:2vw;overflow: hidden;}
.stage1 .contentbar .leftarea{float: left;width:47vw;}
.stage1 .contentbar .rightarea{float: right;width:47vw;}
.stage1 .contentbar .userinfo{position: absolute;z-index: 10;bottom:0px;left:0px;width:100%;height:30px;padding:5px 0;overflow: hidden;}
.stage1 .contentbar .usericon{float:left;position:relative;top:5px;width:22px;height:22px;margin-left:5px;border-radius: 50%;border:3px solid #fff;vertical-align: middle;}
.stage1 .contentbar .username{float:left;font-size: 14px;line-height: 39px;color:#fff;text-indent: 5px;}
.stage1 .contentbar .userid{float:right;position: absolute;right:0;bottom:0;background-color:rgba(0,0,0,.5);color:#fff;line-height: 30px;padding:0 1em;font-size:14px;border-top-left-radius:70%;}
.stage1 .pagebar{display:flex;justify-content: center;padding:30px 0 40px;}
.stage1 .pagebar>a{display:inline-block;width:1.6em;line-height:1.6;text-align:center;color: rgb(131, 131, 131);font-family: "Microsoft YaHei";font-size: 16px;border:1px solid rgb(181, 181, 181);font-weight: bold;margin:0 5px;}
.stage1 .pagebar>a.active{background-color:#59c2e6;color:#fff;}

.navbar{position: fixed;left:0;right:0;bottom:0;display: flex;border-top:1px solid #eee;justify-content: space-around;height:60px;background-color:#fff;z-index: 100;}
.navitem{text-align: center;padding-top:10px;}
.navbar img{width:20px;height:20px;display:block;margin:auto;}
.navbar h5{font-size: 14px;color: rgb(131, 131, 131);font-family: "Microsoft YaHei";line-height: 2;font-weight: normal;}
.navitem:nth-of-type(3){width:25vw;background-color:#59c2e6;color:#fff;padding-top:6px;}
.navitem:nth-of-type(3) .navicon{position: relative;font-size:20px;height:24px;line-height:20px;top:3px;font-weight:bold;display:inline-block;width:24px;background-color:#fff;color:#59c2e6;border-radius: 50%;}
.navitem:nth-of-type(3) h5{color:#fff;width:25vw;font-weight: normal;text-align: center;}


.copyrightbar{padding-bottom:60px;background-color:#e6e6e6;text-align: center;line-height: 80px;font-size: 20px;color:rgb(131, 131, 131);}




.stage2{position: fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,.7);z-index: 99;}
.stage2 .showbox{-webkit-transition: bottom 1s;transition: bottom 1s;position: absolute;left:5vw;bottom:-50vh;padding:15vw 5vw 70px;height:80vh;width:90vw;border-radius:10px;background-color:#fff;color:#838383;box-sizing: border-box;font-size: 16px;font-family: "microsoft yahei";}
.stage2 .showbox.active{bottom:0;}
.stage2 .closebtn{position: absolute;top:5px;right:5px;width:30px;height:30px;}
.stage2 .pbox{overflow:scroll;height:60vh;}

.stage3{background-color:#fff;}
.stage3 .header{line-height:2;background-color:#59c2e6;color:#fff;font-size:22px;font-family: "microsoft yahei";text-align: center;}
.stage3 .userinfo{overflow:hidden;box-sizing:border-box;padding:5vw;background-color:#e6e6e6;}
.stage3 .userinfo .usericon{width:50px;height:50px;border-radius: 50%;float:left;border:2px solid #fff;}
.stage3 .userinfo .usertxt{float:left;padding-left:16px;color:rgb(131, 131, 131);}
.stage3 .userinfo .username{font-size: 20px;line-height: 1.5;}
.stage3 .userinfo .userid{font-size: 16px;}
.stage3 .usercontent{box-sizing: border-box;padding:5vw 5vw;}
.stage3 .usercontent h3{font-size: 24px;font-weight:600;line-height:3;color:rgb(131, 131, 131);font-family: "microsoft yahei";}
.stage3 .usercontent video{width:100%;}
.stage3 .usercontent p{padding:20px 0 60px;color:rgb(131, 131, 131);font-size: 15px;line-height: 1.6;}

.stage4{background-color:#fff;}
.stage4 .header{line-height:2;background-color:#59c2e6;color:#fff;font-size:22px;font-family: "microsoft yahei";text-align: center;}
.stage4 input{display:block;border:1px solid #ddd;width:80vw;margin:15px auto;font-size:18px;color:rgb(131, 131, 131);line-height: 2;text-indent: 10px;}
.stage4 textarea{display:block;border:1px solid #ddd;width:80vw;margin:15px auto;font-size:18px;color:rgb(131, 131, 131);line-height: 1.4;box-sizing: border-box;padding:10px;}
.stage4 .fileshow{display:flex;width:80vw;margin:auto;justify-content: space-around;}
.stage4 .fileshow>div{position: relative;border:1px solid #838383; width:19vw;height:19vw;box-sizing: border-box;background-color:#838383; }
.stage4 .fileshow>div h3{text-align: center;color:#fff;font-size: 8vw;line-height: 1;}
.stage4 .fileshow>div p{font-size:12px;text-align: center;color:#fff;}
.stage4 .fileshow>div .showimg{width:19vw;height:19vw;}
.stage4 .fileshow>div .close{width:16px;height:16px;position: absolute;z-index: 10;top:0;right:0;}
.stage4 .infomation{padding:10px 10vw;font-size: 14px;color:#838383;}
.stage4 .infomation p:first-of-type{text-indent: 0em;}
.stage4 .infomation p{text-indent: 2em;}
.stage4 .submitbtn{display: flex;width:80vw;margin:20px auto 0;}
.stage4 .submitbtn>div{font-size: 20px;line-height: 2.2;width:50%;text-align: center;}
.stage4 .submitbtn>div.btn1{color:#fff;background-color:#59c2e6;}
.stage4 .submitbtn>div.btn2{color: #838383;;background-color:#e6e6e6;}
.stage4 .loading{position: fixed;flex-direction:column; z-index: 10;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.7);display:flex;justify-content: center;}
.stage4 .loading h3{margin:auto;color:#fff;}
.stage4 .loading .anim{margin:auto;text-align: center;}
.stage4 .loading .anim span{display:inline-block;width:10px;height:10px;border-radius: 50%;background-color:#fff;}




  
  